<template>
    <div class="order_areas">
        <!-- <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：订单审核><router-link to="/order_examine/order_areas">敏感地区</router-link></div>
        <div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
        --><div class="team">
        	<div class="powertop">
        		<router-link class="powertopli" to="/order_examine/order_review">审核订单</router-link>
                <router-link class="powertopli powertopact" to="/order_examine/order_areas">敏感地区</router-link>
        	</div>
        </div>
        <div style="background: rgb(247, 247, 247); border: 1px solid rgb(190, 190, 190); padding: 20px; margin: 20px; color: rgb(57, 57, 57);">
          <div style="margin-bottom: 20px; font-weight: bold;">审核设置</div>
          <div class="kflexc" style="font-size: 14px;">
            <div style="margin-right: 10px;">敏感地址匹配范围</div>
            <div style="margin-right: 20px;">
              <el-tooltip class="item" effect="dark" content="缩小匹配范围可以让结果更精准" placement="top-start">
              	<i class="el-icon-question" style="color: #409EFF; font-size: 20px; margin-left: 5px; cursor: pointer;" ></i>
              </el-tooltip>
            </div>
            <div style="margin-right: 40px;" class="kflexc">
                <el-radio v-model="all.warn_address_range" @change="changed2" :label="1">只匹配省</el-radio>
                <el-radio v-model="all.warn_address_range" @change="changed2" :label="2">只匹配省市</el-radio>
                <el-radio v-model="all.warn_address_range" @change="changed2" :label="3">匹配全地址</el-radio>
            </div>
            <div style="margin-right: 10px;">
               <el-switch v-model="all.warn_address_approval" active-color="rgb(8, 201, 160)" inactive-color="rgb(220, 220, 220)" :active-value='1' :inactive-value='0' @change="changed()"></el-switch>
               自动审核无需人工
            </div>
            <div style="margin-right: 20px;">
              <el-tooltip class="item" effect="dark" content="关键词匹配中的订单不再需要人工审核，系统自动判定为生产失败" placement="top-start">
              	<i class="el-icon-question" style="color: #409EFF; font-size: 20px; margin-left: 5px; cursor: pointer;" ></i>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="ordercenterli">
        	<div class="orderflex mingan">
        		<el-button @click="allno" round plain type="primary">批量拒绝</el-button>
        		<el-button @click="allgo" round plain type="primary">批量通过</el-button>
        	</div>
        	<div class="orderlist" v-loading="whereloading"  style="padding-top: 0;">
        		<div class="list" style="position: relative;">
        			<div style="position: absolute; left: 35px; top: 15px;">
        				<input type="checkbox" @change="quanxuan" value="0" v-model="allchoose">
        			</div>
        			<div class="th t11">ID</div>
        			<div class="th t12">下单时间</div>
        			<div class="th t13">敏感地区</div>
        			<div class="th t15">收货地址</div>

        			<div class="th t7">归属地</div>
        			<div class="th t8">收件人</div>
        			<div class="th t9">联系电话</div>
        			<div class="th t10">操作</div>
        		</div>


        		<div class="list" v-for="item in wherelist" :key="item.id" style="position: relative; border-bottom: 1px #eaeaea solid;">
        			<div style="position: absolute; left: 35px; top: 23px;">
        				<input type="checkbox" :value="item.id" @change="checkearea" v-model="checkedarea">
        			</div>
        			<div class="td t11 kflexcc">{{item.id}}</div>
        			<div class="td t12 kflexcc">{{item.created_at}}</div>
        			<div class="td t13 kflexcc" >{{item.warn_area}}</div>
        			<div class="td t15 kflexcc" >{{item.address_province}}{{item.address_city}}{{item.address_district}}{{item.address}}</div>

        			<div class="td t7 kflexcc">{{item.region_c}}{{item.region_p}}</div>
        			<div class="td t8 kflexcc">{{item.address_name}}</div>
        			<div class="td t9 kflexcc">{{item.address_mobile}}</div>
        			<div class="td t10 reviewsee  kflexcc" >
        				<el-button type="text" style="color: #2974FF;" @click="oneno(item.id)">确认生产失败</el-button>
        				<el-button type="text" @click="onego(item.id)">继续生产</el-button>
        			</div>
        		</div>
        		<div class="orderfanye">
              <el-pagination background :page-size="search.size" :current-page="search.page" @current-change="fanye" layout="total,prev, pager, next" :total="search.total"></el-pagination>
            </div>

        	</div>
        </div>

        <el-dialog title="开启自动审核" center :visible.sync="log" :close-on-click-modal="false" width="600px">
          <div style="text-align: center;">
            确定开启自动审核么？开启后系统将把匹配中关键词的订单自动置为生产失败
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="info" round @click="quxiao">取 消</el-button>
            <el-button type="danger" round @click="kaiqi">确认开启</el-button>
          </span>
        </el-dialog>
        <el-dialog title="关闭自动审核" center :visible.sync="log2" :close-on-click-modal="false" width="600px">
          <div style="text-align: center;">
            确定关闭自动审核么？
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="info" round @click="quxiao">取 消</el-button>
            <el-button type="danger" round @click="guanbi">确认关闭</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
      name: 'order_areas',
            data() {
                return {
                  log:false,
                  log2:false,
                  all:{
                    warn_address_range:"",
                    warn_address_approval:""
                  },
                    product_name:"",
                    sku:"",
                    redbgy:false,
                    lanseid:"",
                    checkedarea:[],
                    allarea:[],
                    choosearea:[],
                    allchoose:false,
                    isIndeterminate:false,
                    checkAll:false,
                    tabnum:1,
                    reasonnum:0,
                    reasons:"",
                    loading:true,
                    dialogVisible:false,
                    piclog:false,
                    picurl:"",
                    reviewback:true,
                    reviewloading:false,
                    questionloading:true,
                    questiondialog:false,
                    questionsear:"",
                    questionname1:"",
                    questionname2:"",
                    questionname3:"",
                    whereloading:true,
                    wherelist:[],
                    orderlist:[],
                    qudaolist:[],
                    chanpinlist:[],
                    questionlist:[],
                    uploadpic:"",
                    total:0,
                    choose:{
                        face:"",
                        back:"",
                        hand:"",
                        cardid:"",
                        orderid:"",
                        good_name:"",
                        good_sku:""
                    },
                    search:{
                        channel_id:"",
                        product_name:"",
                        sp_id:"",
                        merchant_name:"",
                        product_sku:"",
                        source:"",
                        starttime:"",
                        endtime:"",
                        time:"",
                        status:"",
                        page:1,
                        size:100,
                        total:0,
                        flag:"",
                        share_name:""
                    },
                    copyBtn:"",
                    act:1,
                    shennum:""
                };
            },
            beforeDestroy() {
              document.onkeydown = null
            },
            created() {
                //按回车键搜索
                var that = this
                document.onkeydown = function(e){
                   var ev = document.all ? window.event : e;
                   if(ev.keyCode==13) {
                       that.dosearch()
                   }
                }
                // 获取敏感地区
                this.getwhere();
                this.getpeizhi()
           	},
           		  methods: {
                  quxiao:function(){
                    if(this.all.warn_address_approval == 0){
                      this.all.warn_address_approval = 1
                    }else{
                      this.all.warn_address_approval = 0
                    }
                    this.log = false
                    this.log2 = false
                  },
                  kaiqi:function(){

                    axios.post('/api/plan-market/merchant/store/config/set',this.all)
                        .then(response => {
                            if(response.data.msg.code == 0) {
                                this.log = false
                                this.getpeizhi()
                            }else {
                                this.$message.error(response.data.msg.info);
                            }
                        })

                  },
                  guanbi:function(){
                    axios.post('/api/plan-market/merchant/store/config/set',this.all)
                        .then(response => {
                            if(response.data.msg.code == 0) {
                                this.log2 = false
                                this.getpeizhi()
                            }else {
                                this.$message.error(response.data.msg.info);
                            }
                        })
                  },
                  changed2:function(){
                    axios.post('/api/plan-market/merchant/store/config/set',this.all)
                        .then(response => {
                            if(response.data.msg.code == 0) {
                                this.getpeizhi()
                            }else {
                                this.$message.error(response.data.msg.info);
                            }
                        })
                  },
                  changed:function(){
                    if(this.all.warn_address_approval){
                      this.log = true
                    }else{
                      this.log2 = true
                    }
                  },
                  getpeizhi:function(){
                    axios.get('/api/plan-market/merchant/store/config/info')
                        .then(response => {
                            if(response.data.msg.code == 0) {
                                this.all = response.data.data
                            }else {
                                this.$message.error(response.data.msg.info);
                            }
                        })
                  },
                  //翻页功能
                  fanye:function(page){
                    console.log(page)
                    this.search.page = page
                    this.getwhere()
                  },
                  // 获取敏感地区
                  getwhere:function(){
                      var that = this
                      axios.get('/api/plan-market/area/list?page_size='+this.search.size+'&page='+this.search.page)
                          .then(response => {
                              that.allarea = []
                              that.wherelist = response.data.data.data
                              that.search.total = response.data.data.total
                              that.whereloading = false
                              for( var i in this.wherelist){
                                  that.allarea.push(this.wherelist[i].id)
                              }
                          })
                  },
           				//批量通过
           				allgo:function(){

           					  if(this.checkedarea == ""){
           						  this.$message({
           						    message: '请先选择要审核的订单',
           						    type: 'error'
           						  });
           						  return false
           					  }
                      this.whereloading = true
                      var arr = ""
                      for( var i in this.checkedarea){
                          console.log(this.checkedarea[i])
                          arr = arr + this.checkedarea[i] + ","
                      }
                      arr = arr.substring(0, arr.lastIndexOf(','));

           					  var params = new URLSearchParams();
           					  params.append('isok', 1);
           					  params.append('order_ids', arr);
           					  axios.post('/api/plan-market/area/check', params)
           						  .then(response => {
                            if(response.data.msg.code == 0) {
                                this.$message({
                                  message: '已通过审核',
                                  type: 'success'
                                });
                                this.getwhere();
                                this.checkedarea = []
                                this.allchoose = false
                            }else {
                                this.$message.error(response.data.msg.info);
                            }

           						  })
           				  },
           				  //批量拒绝
           				    allno:function(){

                        if(this.checkedarea == ""){
                            this.$message({
                            message: '请先选择要审核的订单',
                            type: 'error'
                            });
                            return false
                        }
                        this.whereloading = true
                        var arr = ""
                        for( var i in this.checkedarea){
                            console.log(this.checkedarea[i])
                            arr = arr + this.checkedarea[i] + ","
                        }
                        arr = arr.substring(0, arr.lastIndexOf(','));

           				  	  var params = new URLSearchParams();
           				  	  params.append('isok', 0);
           				  	  params.append('order_ids', arr);
           				  	  axios.post('/api/plan-market/area/check', params)
           				  		  .then(response => {
                              if(response.data.msg.code == 0) {
                                    this.$message({
                                      message: '已拒绝审核',
                                      type: 'success'
                                    });
                                    this.getwhere();
                                    this.checkedarea = []
                                    this.allchoose = false
                              }else {
                                  this.$message.error(response.data.msg.info);
                              }

           				  		  })
           				    },
           				//单条通过
           				  onego:function(id){
           					  this.whereloading = true
           					  var params = new URLSearchParams();
           					  params.append('isok', 1);
           					  params.append('order_ids', id);
           					  axios.post('/api/plan-market/area/check', params)
           						  .then(response => {
           								this.$message({
           								  message: '已通过审核',
           								  type: 'success'
           								});
           								this.getwhere();
           						  })
           				  },
           				  //单条拒绝
           				    oneno:function(id){
           						this.whereloading = true
           				  	  var params = new URLSearchParams();
           				  	  params.append('isok', 0);
           				  	  params.append('order_ids', id);
           				  	  axios.post('/api/plan-market/area/check', params)
           				  		  .then(response => {
           				  			this.$message({
           				  			  message: '已拒绝审核',
           				  			  type: 'success'
           				  			});
           				  			this.getwhere();
           				  		  })
           				    },
           				//选中
           				checkearea:function(){
           					console.log(this.checkedarea)
           					// this.choosearea.push(this.checkedarea)
           					if(this.checkedarea.length == this.allarea.length){
           						this.allchoose = true
           					}else{
           						this.allchoose = false
           					}
           				},
           				//全选
           				quanxuan:function(){

           					if(this.checkedarea.length != this.allarea.length){
           						this.checkedarea = this.allarea
           						this.allchoose = true
           					}else{
           						this.checkedarea = []
           						this.allchoose = false
           					}
           					console.log(this.checkedarea)
           				},
           				//翻页功能
           				fanye:function(page){
           					this.search.page = page
           					this.getwhere()
           				},

           				//判断是否全选
           			    checkalls:function(val){

           					console.log(val)
           			    },
           				//搜索
           				dosearch:function(){
                    this.search.page = 1
           					this.getwhere()
           				}

           		  }
           };
</script>

<style lang="scss" scoped>
    .order_areas{
      /deep/ .el-button--danger {
          color: #FFF;
          background-color: #2974FF;
          border-color: #2974FF;
      }
      .team {
        background: #F9F9F9;
      }

      .powertop {
        display: flex;
        background: #f9f9f9;
      }

      .powertopli {
        flex-basis: 180px;
        line-height: 50px;
        border-bottom: 3px #F9F9F9 solid;
        color: #727272;
        border-right: 1px #F9F9F9 solid;
        font-size: 16px;
        text-align: center;
      }

      .router-link-active {
        background: #FFFFFF;
        border-bottom: 3px #2974FF solid;
      }

        .result{ margin-top: 20px;}

        .newsearch{ display: flex; text-align: center;  margin-bottom: 10px; font-size: 14px;
            .act{ color: #EEF7FF; border-bottom: 3px #EEF7FF solid !important; }
            .news1{ flex-basis: 170px; border-bottom: 3px #DCDCDC solid; padding: 10px 0; cursor: pointer;}
            .news2{ flex-basis: 170px; padding: 10px 0; border-bottom: 3px #DCDCDC solid; cursor: pointer;}
            .news3{ flex-basis: 170px; padding: 10px 0; border-bottom: 3px #DCDCDC solid; cursor: pointer;}
            .news4{ flex-basis: 656px; padding: 10px 0; border-bottom: 3px #DCDCDC solid; cursor: pointer;}
        }

        .ordertab{ display: flex; background: #F9F9F9;}
        .ordertabli{ flex-basis: 160px; line-height: 45px; text-align: center; font-size: 14px; color: #727272; cursor: pointer; border-top: 3px #F9F9F9 solid;}
        .ordertabact{ border-top: 3px #f00 solid; background: #FFFFFF;}
        .ordersearch{ background: #FFFFFF; padding: 15px 30px;}

        .orderflex{ display: flex;}
        .ordersub{ padding-left: 80px;}
        .list{ text-align: center; color: #727272; display: flex; padding:0 20px;}
        .orderlist{ padding: 20px 0; background: #FFFFFF;}

        .list .th{ background: rgb(246, 246, 246); line-height: 50px;  font-size: 14px; flex: 1; }
        .list .td{  height: 70px;  font-size: 14px; overflow: hidden; cursor: pointer; flex: 1;}
        .reviewsee{ cursor: pointer; color: #1478F0;}
        .orderfanye{ text-align: right; margin: 20px 0;}
        .diaflex{ display: flex; justify-content: space-around;}
        .diaflex3{ display: flex; flex-wrap: wrap; justify-content: flex-start;}
        .reviewphone{ flex-basis: 377px; display: flex; justify-content: center; align-items: center; background: #EAEAEA; flex-wrap: wrap;}
        .reviewphone img{ max-width: 100%; max-height: 377px;}
        .prompt{ flex-basis: 377px; color: #E600FF; font-size: 14px; align-items: flex-end; display: flex;}
        .review{ width: 100%; display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap;}
        .questionsear{ width: 200px;}
        .quesresult{ width: 100%; text-align: center;}
        .red{ background: #FF0000; color: #FFFFFF; border: 1px #FF0000 solid;}
        .reason{ width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 20px 0;}
        .reason div{ background: #666; color: #FFFFFF; text-align: center; font-size: 14px; margin: 10px; padding: 3px 8px; margin-bottom: 5px; border-radius: 3px; cursor: pointer;}
        .reasonact{ background: #FF5A5A !important;}
        .reason input{ width: 200px;}
        .reasonf{ margin-top: 20px; background: #FFFFFF !important; width: 300px;}
        .review{}
        .redbg{ background: #FF5A5A !important;}
        .reviewback{ background: #848484; flex-basis: 123px; padding: 0 !important; text-align: center; line-height: 45px; height: 45px; font-size: 20px; border-radius: 5px; cursor: pointer;}
        .reviewgo{ background: #7CCF3E; flex-basis: 123px; padding: 0 !important; text-align: center; line-height: 45px; height: 45px; font-size: 20px; border-radius: 5px; cursor: pointer;}
        .jianqie{width: 100%; height: 500px;}
        .mingan{ padding: 20px 20px; background: #FFFFFF}
        .lanse{ text-shadow: #1478F0 0px 0px 2px;}
    }
</style>
